<template>
  <div class="top-header">
    <!-- 左侧控制侧边菜单栏伸缩的图标 -->
    <div @click="toggleClick" class="sidebar-collapse-btn">
      <svg
        :class="{'is-active': !isCollapse}"
        class="sidebar-icon"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        width="64"
        height="64"
      >
        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
      </svg>
    </div>

    <!-- 右侧（用户信息） -->
    <div class="right-menu">

<!--      <div class="right-menu-item" >
        <router-link to="/" class="index-btn">
          博客
        </router-link>
      </div>-->

      <div class="right-menu-item" >
        <el-badge :is-dot="unreadMessageSize !== 0" class="fz15" style="line-height: 25px;">
          <span @click="$router.push({ name: 'admin-user', params: { tabIndex: '0' }})" style="cursor: pointer;">消息</span>
        </el-badge>
      </div>

      <el-dropdown class="avatar-container right-menu-item">
        <div class="avatar-wrapper">
          <span class="user-name">{{ username }}</span>
          <img :src="avatar" class="user-avatar">
          <i class="el-icon-caret-bottom d-icon" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="$router.push('/')">首页</el-dropdown-item>
          <el-dropdown-item @click.native="$router.push('/admin/user')">
            个人中心
          </el-dropdown-item>
          <el-dropdown-item @click.native="showSettings = true">
            修改布局
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout(true)">
            切换用户
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout(false)">
            退出
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "admin-header-navbar",
  data() {
    return {
      unreadMessageSize: 0
    }
  },
  created() {
    if (process.client) {
      this.getUnreadUserMessageCountHandle()
    }
  },
  computed: {
    // 用户名称
    username() {
      return this.$store.state.user.username
    },
    // 用户头像
    avatar() {
      return this.$store.state.user.avatar
    },
    // 是否显示右侧抽屉
    showSettings: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    // 是否折叠左侧菜单栏
    isCollapse: {
      get() {
        return this.$store.state.settings.isCollapse
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'isCollapse',
          value: val
        })
      }
    },
  },
  methods: {
    /**
     * 获取用户未读消息个数事件
     */
    getUnreadUserMessageCountHandle() {
      this.$axios.$get('/sys/user-message/unread/count')
        .then(({ data }) => {
          this.unreadMessageSize = data
        })
    },
    /**
     * 侧边菜单伸缩变化事件
     */
    toggleClick() {
      this.isCollapse = !this.isCollapse
    },
    /**
     * 用户退出登录事件
     * @param {boolean} bool 退出登录方式（true-切换用户 false-直接退出）
     */
    logout(bool) {
      this.$axios.$get('/sys/user/logout')
        .then(() => {
          this.$notify({
            title: '退出登录成功',
            type: 'success',
            message: this.username + "登录退出成功",
            offset: 100,
            duration: 1500
          });

          this.$store.commit('user/setUserId', '')
          this.$store.commit('user/setUsername', '')
          // this.$store.commit('user/setAvatar', 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80')
          this.$store.commit('user/setAvatar', '')
          this.$store.commit('user/setStatus', false)

          this.$store.commit('menu/removeAllMenuTag')

          // 从cookie中删除用户信息
          this.$cookies.remove('token')
          this.$cookies.remove('userId')
          this.$cookies.remove('username')
          this.$cookies.remove('avatar')

          if (bool) {
            // 跳转到登录页面
            this.$router.push({ name: 'sign', params: { optType: '0', prePage: 'admin' }})
          } else {
            // 回到系统首页面
            this.$router.push('/')
          }
        })
    },
  }
}
</script>

<style>
.top-header {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}
.sidebar-icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
.sidebar-icon.is-active {
  transform: rotate(180deg);
}
.sidebar-collapse-btn {
  line-height: 46px;
  height: 100%;
  padding: 0 15px;
  text-align: left;
  float: left;
  cursor: pointer;
  transition: background .3s;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-collapse-btn:hover {
  background: rgba(0, 0, 0, .025)
}

.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;
}
.right-menu:focus {
  outline: none;
}
.right-menu .right-menu-item {
  display: inline-block;
  padding: 0 8px;
  /*height: 100%;*/
  /*font-size: 18px;*/
  color: #5a5e66;
  vertical-align: text-bottom;
}
.right-menu-item:hover {
  background: rgba(0, 0, 0, .025)
}
.right-menu-item .index-btn {
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  padding: 5px 20px;
  text-decoration: none;
}
.right-menu-item .index-btn:hover {
  color: #fff;
  background-color: #3b8070;
}

.avatar-container {
  height: 100%;
  margin-right: 30px;
}

.avatar-wrapper {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-wrapper .user-name {
  height: 100%;
  font-size: 17px;
  font-family: SimHei,serif;
  margin-right: 10px;
  cursor: pointer;
}
.avatar-wrapper .d-icon {
  margin-top: 10px;
}
.avatar-wrapper .user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.el-icon-caret-bottom {
  cursor: pointer;
  position: absolute;
  right: -20px;
  top: 25px;
  font-size: 12px;
}
</style>

<style scoped>

</style>
